<template>
  <el-card>
    <div class="order-warning">
      <div slot="header" class="clearfix">
        <!-- 面包导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/order/activist' }">退款维权</el-breadcrumb-item>
          <el-breadcrumb-item>退款维权详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="steps">
        <el-steps :active="3" align-center>
          <el-step title="买家申请维权" description="2019-08-13 11:22:50"></el-step>
          <el-step title="商家处理退款申请" description="2019-08-14 11:22:50"></el-step>
          <el-step title="买家退货给商家" description="2019-08-15 11:22:50"></el-step>
          <el-step title="退款完成" description="2019-08-16 11:22:50"></el-step>
        </el-steps>
      </div>
      <el-divider></el-divider>
      <div class="description">
        <el-row :gutter="35">
          <el-col :span="8">
            <div class="el-col-item">
              <h3>售后维权</h3>
              <el-image style="width: 60px; height: 45px" src='https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg' fit="contain"></el-image>
              <span class="shopName">店家名称</span>
              <el-divider>期望</el-divider>
              <el-row gutter='10' class="row-item">
                <el-col :span="6"><div class="keyName">期望结果:</div></el-col>
                <el-col :span="18"><span class="valueName colorOrder">仅退款</span></el-col>
              </el-row>
              <el-row gutter='10' class="row-item">
                <el-col :span="6"><div class="keyName">退款金额:</div></el-col>
                <el-col :span="18"><span class="valueName colorOrder">0.01</span> 元</el-col>
              </el-row>
              <el-row gutter='10' class="row-item">
                <el-col :span="6"><div class="keyName">维权原因:</div></el-col>
                <el-col :span="18"><span class="valueName">其他</span></el-col>
              </el-row>
              <el-row gutter='10' class="row-item">
                <el-col :span="6"><div class="keyName">维权编号:</div></el-col>
                <el-col :span="18"><span class="valueName">2019081</span></el-col>
              </el-row>
              <el-divider>信息</el-divider>

              <el-row gutter='10' class="row-item">
                <el-col :span="6"><div class="keyName">订单编号:</div></el-col>
                <el-col :span="18"><span class="valueName colorOrder-Blue">E20190807</span></el-col>
              </el-row>
              <el-row gutter='10' class="row-item">
                <el-col :span="6"><div class="keyName">付款时间:</div></el-col>
                <el-col :span="18"><span class="valueName">2019-08-07 16:05:38</span></el-col>
              </el-row>
              <el-row gutter='10' class="row-item">
                <el-col :span="6"><div class="keyName">买家:</div></el-col>
                <el-col :span="18"><span class="valueName"> - </span></el-col>
              </el-row>
              <el-row gutter='10' class="row-item">
                <el-col :span="6"><div class="keyName">物流信息:</div></el-col>
                <el-col :span="18"><span class="valueName"> - </span></el-col>
              </el-row>
              <el-row gutter='10' class="row-item">
                <el-col :span="6"><div class="keyName">运费:</div></el-col>
                <el-col :span="18"><span class="valueName">0.00</span> 元</el-col>
              </el-row>
              <el-row gutter='10' class="row-item">
                <el-col :span="6"><div class="keyName">合计优惠:</div></el-col>
                <el-col :span="18"><span class="valueName">0.00</span> 元</el-col>
              </el-row>
              <el-row gutter='10' class="row-item">
                <el-col :span="6"><div class="keyName">储值卡/礼品卡:</div></el-col>
                <el-col :span="18"><span class="valueName">0.00</span> 元</el-col>
              </el-row>
              <el-row gutter='10' class="row-item">
                <el-col :span="6"><div class="keyName">实付金额:</div></el-col>
                <el-col :span="18"><span class="valueName colorOrder">0.01</span> 元</el-col>
              </el-row>

            </div>
          </el-col>
          <el-col :span="16">
            <div class="el-col-item">
              <!-- 协商记录 -->
              <h3>协商记录</h3>
              <ul class="xieshan">
                <li><div class="li-name">买家</div><span class="li-time">1988-11-18 04:13:23</span></li>
                <li><div class="li-name">卖家</div><span class="li-time">1988-11-18 04:13:23</span></li>
                <li><div class="li-name">买家</div><span class="li-time">1988-11-18 04:13:23</span></li>
                <li><div class="li-name">卖家</div><span class="li-time">1988-11-18 04:13:23</span></li>
                <li><div class="li-name">买家</div><span class="li-time">1988-11-18 04:13:23</span></li>
                <li><div class="li-name">卖家</div><span class="li-time">1988-11-18 04:13:23</span></li>
                <li><div class="li-name">买家</div><span class="li-time">1988-11-18 04:13:23</span></li>
                <li><div class="li-name">卖家</div><span class="li-time">1988-11-18 04:13:23</span></li>
                <li><div class="li-name">买家</div><span class="li-time">1988-11-18 04:13:23</span></li>
                <li><div class="li-name">卖家</div><span class="li-time">1988-11-18 04:13:23</span></li>
                <li><div class="li-name">买家</div><span class="li-time">1988-11-18 04:13:23</span></li>
                <li><div class="li-name">卖家</div><span class="li-time">1988-11-18 04:13:23</span></li>
                <li><div class="li-name">买家</div><span class="li-time">1988-11-18 04:13:23</span></li>
                <li><div class="li-name">卖家</div><span class="li-time">1988-11-18 04:13:23</span></li>
                <li><div class="li-name">买家</div><span class="li-time">1988-11-18 04:13:23</span></li>
                <li><div class="li-name">卖家</div><span class="li-time">1988-11-18 04:13:23</span></li>
              </ul>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
.steps {
  margin: 50px 0;
}
.el-col {
  .el-col-item {
    padding: 15px;
    width: 100%;
    border: 1px solid #ccc;
    h3{
      font-size: 16px;
      font-weight: 900;
      margin-bottom: 15px;
    }
    .shopName{
      margin-left: 15px;
      vertical-align: top;
    }
  }
}
.row-item{
  padding:7px;
  .keyName{
    text-align: right;
  }
}
.xieshan>li{
  padding:7px 0;
  display: flex;
}
.li-name{
  color:#000;
  width: 50px;
}
.li-time{
  color:#d7d7d7;
}
</style>
